import React, { useState, useContext } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { Avatar, Title, Caption, Paragraph, Drawer, Text, TouchableRipple, Switch } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';

// import { Context as AuthContext } from '../context/AuthContext';
// const { state, signout } = useContext(AuthContext);

import { useDispatch } from 'react-redux';
import { signout } from '../store/actions';

export function DrawerContent(props) {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  const dispatch = useDispatch();

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View style={styles.drawerContent}>
          <View style={styles.userInfoSection}>
            <View style={{ flexDirection: 'row', marginTop: 15 }}>
              <Avatar.Image source={{ uri: 'https://i.applecdn.net/vod/2018/10/25/5bd1e5652cde1.jpg' }} size={50} />
              <View style={{ flexDirection: 'column', marginLeft: 15 }}>
                <Title style={styles.title}>小 鸡 快 跑</Title>
                <Caption style={styles.caption}>@这是个什么鬼</Caption>
              </View>
            </View>
            <View style={styles.row}>
              <View style={styles.section}>
                <Paragraph style={[styles.paragraph, styles.caption]}>80</Paragraph>
                <Caption style={[styles.caption]}>Following</Caption>
              </View>
              <View style={styles.section}>
                <Paragraph style={[styles.paragraph, styles.caption]}>1000</Paragraph>
                <Caption style={[styles.caption]}>Follower</Caption>
              </View>
            </View>
          </View>
          <Drawer.Section style={styles.drawerSection}>
            <DrawerItem
              icon={(color, size) => <Icon name="home-outline" color={color} size={size} />}
              label="首 页"
              onPress={() => {
                props.navigation.navigate('LALALA');
              }}
            ></DrawerItem>
            <DrawerItem
              icon={(color, size) => <Icon name="account-outline" color={color} size={size} />}
              label="账 号"
              onPress={() => {
                props.navigation.navigate('Detail');
              }}
            ></DrawerItem>
            <DrawerItem
              icon={(color, size) => <Icon name="bookmark-outline" color={color} size={size} />}
              label="收 藏"
              onPress={() => {
                props.navigation.navigate('Explore');
              }}
            ></DrawerItem>
            <DrawerItem
              icon={(color, size) => <Icon name="account-details-outline" color={color} size={size} />}
              label="设 置"
              onPress={() => {
                props.navigation.navigate('Profile');
              }}
            ></DrawerItem>
            <DrawerItem
              icon={(color, size) => <Icon name="account-check-outline" color={color} size={size} />}
              label="帮 助"
              onPress={() => {
                props.navigation.navigate('Support');
              }}
            ></DrawerItem>
          </Drawer.Section>
          <Drawer.Section title="preference">
            <TouchableRipple
              onPress={() => {
                toggleTheme();
              }}
            >
              <View style={styles.preference}>
                <Text>深色主题</Text>
                <View pointerEvents="none">
                  <Switch value={isDarkTheme} />
                </View>
              </View>
            </TouchableRipple>
          </Drawer.Section>
        </View>
      </DrawerContentScrollView>
      <Drawer.Section style={styles.bottomDrawerSection}>
        <DrawerItem
          icon={(color, size) => <Icon name="exit-to-app" color={color} size={size} />}
          label="退 出"
          onPress={() => dispatch(signout())}
        ></DrawerItem>
      </Drawer.Section>
    </View>
  );
}
const styles = StyleSheet.create({
  drawerContent: {
    flex: 1,
  },
  userInfoSection: {
    paddingLeft: 20,
  },
  title: {
    fontSize: 16,
    marginTop: 3,
    fontWeight: 'bold',
  },
  caption: {
    fontSize: 14,
    lineHeight: 14,
  },
  row: {
    marginTop: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 15,
  },
  paragraph: {
    fontWeight: 'bold',
    marginRight: 3,
  },
  drawerSection: {
    marginTop: 15,
  },
  bottomDrawerSection: {
    marginBottom: 15,
    borderTopColor: '#f4f4f4',
    borderTopWidth: 1,
  },
  preference: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
});
